<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投诉管理</title>
    <%@ include file="/WEB-INF/view/common/includ-css.jsp" %>
</head>
<body class="gray-bg">
<div class="row wrapper border-bottom white-bg">
    <div class="col-sm-12">
        <div class="ibox float-e-margins" style="margin-bottom: 0px;">
            <div class="ibox-title">
                <h5>查询条件</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="font-normal">电话：</label>
                        <input type="text" id="phone" name="phone"/>
                    </div>
                    <div class="form-group">
                        <label class="font-normal">被投诉人：</label>
                        <input type="text" id="userName" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label class="font-normal">投诉人：</label>
                        <input type="text" id="objName" name="objName"/>
                    </div>
                    <div class="form-group">
                        <label class="font-normal">投诉原因：</label>
                        <input type="text" id="cause" name="cause"/>
                    </div>
                    <div class="form-group">
                        <label class="font-normal">类型：</label>
                        <select class="form-control" id="type">
                            <option value="">全部</option>
                            <option value="1">单聊</option>
                            <option value="2">群聊</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="font-normal">是否处理：</label>
                        <select class="form-control" id="isDeal">
                            <option value="">全部</option>
                            <option value="0">未处理</option>
                            <option value="1">已处理</option>
                        </select>
                    </div>

                    <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" id="query">
                        <i class="ace-icon fa fa-search bigger-120 blue"></i>查询
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>投诉管理</h2>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <table id="dataTables" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>投诉原因</th>
                            <th>图片</th>
                            <th>内容</th>
                            <th>电话</th>
                            <th>处理状态</th>
                            <th>类型</th>
                            <th>投诉状态</th>
                            <th>被投诉名称</th>
                            <th>投诉人</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%@ include file="/WEB-INF/view/common/includ-js.jsp" %>
<!-- Data Tables -->
<script src="${path}/static/Hui/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/static/Hui/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${path}/static/plugins/layui/layui.all.js"></script>
<script>
    $(function(){

        // 关闭错误提示
        $.fn.dataTable.ext.errMode = 'none';

        // 数据表格
        var tables = $("#dataTables").dataTable({
            serverSide: true,
            searching: false,
            ordering:  false,
            lengthChange: false,
            processing: false,
            pageLength: 20,
            "ajax":{
                url:"/complain/list",
                type:"post",
                data: function (d) {
                    d.phone = $("#phone").val();
                    d.cause = $("#cause").val();
                    d.userName = $("#userName").val();
                    d.objName = $("#objName").val();
                    d.isDeal = $("#isDeal").val();
                    d.type = $("#type").val();
                }
            },
            columns: [
                { "data": "cause" },
                { "data": "pic" },
                { "data": "content" },
                { "data": "phone" },
                { "data": "is_deal" },
                { "data": "TYPE" },
                { "data": "statusStr" },
                { "data": "objName" },
                { "data": "userName" },
                { "data": "create_time" },
                { "data": "id" }
            ],
            columnDefs: [
                {
                    "render": function(data, type, row, meta) {
                        var html ='暂无图片';
                        if(data!=null && data!=''){
                            var src = data.split(',');
                            if(src.length>1){
                                html = "";
                                for (var i=0; i<src.length;i++) {
                                    html += '<img src="'+src[i]+'" style="height: 40px;" onclick="openImg(\''+src[i]+'\')"/>';
                                }
                            }else{
                                html = '<img src="'+data+'" style="height: 40px;" onclick="openImg(\''+data+'\')"/>';
                            }

                        }
                        return html;
                    },
                    "targets": 1
                },
                {
                    "render": function(data, type, row, meta) {
                        if(data!=null && data!=''){
                            return data;
                        }
                        return "";
                    },
                    "targets": 7
                },
                {
                    "render": function(data, type, row, meta) {
                        if(data!=null && data!=''){
                            return data;
                        }
                        return "";
                    },
                    "targets": 8
                },
                {
                    "render": function(data, type, row, meta) {
                        var html = '<div class="action-buttons">';
                        if (row.status == 1) {
                            html += '<a href="javascript:void(0)" onclick="complainOpt(' + row.id + ',3)" class="blue" title="只处理"><i class="ace-icon fa fa-pencil bigger-130">只处理</i></a>';
                            html += '<a href="javascript:void(0)" onclick="complainOpt(' + row.id + ',4)" class="blue" title="封号"><i class="ace-icon fa fa-pencil bigger-130">封号</i></a>';
                        }else if(row.status == 4){
                            html += '<a href="javascript:void(0)" onclick="complainOpt(' + row.id + ',5)" class="blue" title="解封"><i class="ace-icon fa fa-pencil bigger-130">解封</i></a>';
                        }else if(row.status == 5){
                            html += '<a href="javascript:void(0)" onclick="complainOpt(' + row.id + ',4)" class="blue" title="封号"><i class="ace-icon fa fa-pencil bigger-130">封号</i></a>';
                        }
                        html += '</div>';
                        return html;
                    },
                    "targets": 10
                }
            ]
        });
        $("#query").click(function(){
            tables.dataTable().fnDraw();
        });

    });
    function complainOpt(id,status){
        var str = "";
        if(status==3)
            str = "确定只处理该记录";
        if(status==4)
            str = "确定封号该记录";
        if(status==5)
            str = "确定解封该记录";
        // 询问框
        layer.confirm(str, {
            btn: ['确定','取消']
        }, function(){
            $.ajax({
                type:"post",
                url:"/complain/complainOpt",
                dataType:"json",
                data:{id:id,status:status},
                success:function(data){
                    if(data.code == 0){
                        layer.alert(data.msg,{icon:1},function(){
                            window.location.href = window.location.href;
                        });
                    }else{
                        layer.alert(data.msg, {icon: 2});
                    }
                }
            });
        });
    }
    function complainDel(id){
        var str = "确定撤销该记录";
        // 询问框
        layer.confirm(str, {
            btn: ['确定','取消']
        }, function(){
            $.ajax({
                type:"post",
                url:"/complain/del",
                dataType:"json",
                data:{id:id},
                success:function(data){
                    if(data.code == 0){
                        layer.alert(data.msg,{icon:1},function(){
                            window.location.href = window.location.href;
                        });
                    }else{
                        layer.alert(data.msg, {icon: 2});
                    }
                }
            });
        });
    }
    function openImg(path) {
        layer.open({
            type: 1
            , title: false
            , closeBtn: 0
            // , skin: 'layui-layer-nobg'
            ,skin: 'layui-layer-rim' //加上边框
            , shadeClose: true //开启遮罩关闭
            , content: '<img style="width:100%;height:100%;" class="layui-upload-img" src="' + path + '"/>'
            , scrollbar: false
        });
    }
</script>
</body>
</html>
